<template>
  <div class="note">
    <!-- 笔记所有者 -->
    <div class="note_owner">
      <div class="head">
        <!-- 头像 -->
        <van-image width="30" height="30" round :src="headSrc" alt="头像"></van-image>
        <!-- 昵称 -->
        <span class="name">{{ name }}</span>&nbsp;
        <span class="time">·&nbsp; {{ time }}</span>
      </div>
      <div class="set">
        <van-icon name="ellipsis" size="25" @click="fx"></van-icon>
      </div>
    </div>
    <!-- 笔记图 -->
    <div class="note_img">
      <!-- 轮播 -->
      <van-swipe :loop="false" lazy-load>
        <van-swipe-item v-for="(item, i) in arr" :key="i">
          <van-image :src="item"></van-image>
        </van-swipe-item>
        <template #indicator="{ active, total }">
          <!-- 页数 -->
          <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
          <!-- 圆点 -->
          <ul class="dot">
            <li v-for="(el, i) in total" :key="i" :class="active + 1 == el ? 'active' : ''"></li>
          </ul>
        </template>
      </van-swipe>
    </div>
    <!-- icon -->
    <div class="note_icon">
      <div>
        <van-icon name="share-o" size="25" @click="fx"></van-icon>
      </div>
      <div>
        <div>
          <van-icon :name="likeIcon.icon" :color="likeIcon.color" size="25" @click="like(likeIcon)"></van-icon><span>99</span>
        </div>
        <div>
          <van-icon :name="starIcon.icon" :color="starIcon.color" size="25" @click="star(starIcon)"></van-icon><span>99</span>
        </div>
        <div>
          <van-icon name="chat-o" size="25"></van-icon><span>99</span>
        </div>
      </div>
    </div>
    <!-- 笔记标题 -->
    <div class="note_title">
      <p>{{ title }}</p>
      <span class="look">查看全文</span>
    </div>
    <van-share-sheet v-model:show="showShare" title="分享至" :options="options"></van-share-sheet>
  </div>
</template>

<script>
import { Image, Swipe, SwipeItem, ShareSheet } from "vant";
export default {
  name: "GzNote",
  data() {
    return {
      arr: ["1.jpg", "2.jpg", "1.jpg"],
      showShare: false,
      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "朋友圈", icon: "wechat-moments" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
        ],
        [
          { name: "复制链接", icon: "link" },
          { name: "分享海报", icon: "poster" },
          { name: "二维码", icon: "qrcode" },
          { name: "小程序码", icon: "weapp-qrcode" },
        ],
      ],
      likeIcon : {
        icon : "like-o",
        color : "black",
        flag : true,
      },
      starIcon : {
        icon : "star-o",
        color : "black",
        flag : true,
      }
    };
  },
  methods: {
    fx() {
      console.log(11);
      this.showShare = !this.showShare;
    },
    like(icon) {
      icon.flag = !icon.flag;
      if (icon.flag) {
        icon.icon = "like-o";
        icon.color = "black";
      } else {
        icon.icon = "like";
        icon.color = "red";
      }
    },
    star(icon){
      icon.flag = !icon.flag;
      if (icon.flag) {
        icon.icon = "star-o";
        icon.color = "black";
      } else {
        icon.icon = "star";
        icon.color = "#F8C020";
      }
    },
  },
  components: {
    [Image.name]: Image,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [ShareSheet.name]: ShareSheet,
  },
  props: {
    src: {
      type: String,
      default: "2.jpg",
    },
    title: {
      type: String,
      default: "这是一个很长的笔记内容苟富贵法第三方范德萨发发生士大夫撒发",
    },
    headSrc: {
      type: String,
      default: "avatar.jpg",
    },
    name: {
      type: String,
      default: "小武",
    },
    num: {
      type: Number,
      default: 9999,
    },
    time: {
      type: String,
      default: "5天前",
    },
  },
};
</script>

<style scoped lang="scss">
.note {
  width: 100vw;

  // 笔记顶部
  .note_owner {
    width: 100%;
    border-bottom: 1px solid #eee;
    padding: 2% 3%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .head {
      display: flex;
      flex: 1;
      align-items: center;

      .name {
        padding-left: 2%;
        font-size: 15px;
      }

      .time {
        transform: scale(0.8);
        color: #aaa;
      }
    }
  }

  // 笔记 图片
  .note_img {
    width: 100%;

    // height: 300px;
    .custom-indicator {
      color: #fff;
      border-radius: 45%;
      position: absolute;
      right: 5px;
      top: 10px;
      padding: 2px 5px;
      font-size: 12px;
      background: rgba(82, 80, 80, 0.9);
    }

    .dot {
      padding: 2%;
      width: 100%;
      display: flex;
      justify-content: center;

      li {
        width: 7px;
        height: 7px;
        margin-left: 3px;
        border-radius: 50%;
        background: #ccc;
      }

      .active {
        background: red;
      }
    }
  }

  // 笔记 icon 图标
  .note_icon {
    width: 100%;
    padding: 2%;
    display: flex;
    justify-content: space-between;

    div {
      display: flex;
      align-items: center;

      span {
        padding: 5px;
        font-size: 14px;
      }
    }
  }

  // 笔记 title
  .note_title {
    width: 100%;
    padding: 0 2% 2%;
    display: flex;

    p {
      flex: 4;
      font-size: 16px;
      letter-spacing: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .look {
      flex: 1;
      font-size: 14px;
      font-weight: bold;
    }
  }
}
</style>